<template>
  <div class="match-container">
    <el-drawer v-model="dialogFormVisible" size="50%" @close="close">
      <template #header>
        <h4>{{ title }}</h4>
      </template>
      <template #default>
        <el-descriptions
          :column="3"
          :size="size"
          title="根据该会员的择偶需求："
        >
          <el-descriptions-item>
            <el-tag size="small">
              年龄：{{ coudFrom.min_age }}-{{ coudFrom.max_age }}岁
            </el-tag>
            <el-tag size="small">
              身高：{{ coudFrom.min_height }}-{{ coudFrom.max_height }}CM
            </el-tag>
            <el-tag size="small">婚况：{{ coudFrom.marryText }}</el-tag>
            <el-tag size="small">学历：{{ coudFrom.educationText }}</el-tag>
            <el-tag size="small">职业：{{ coudFrom.jobText }}</el-tag>
            <el-tag size="small">收入：{{ coudFrom.salaryText }}</el-tag>
            <el-tag size="small">房子：{{ coudFrom.houseText }}</el-tag>
            <el-tag size="small">车子：{{ coudFrom.carText }}</el-tag>
            <el-tag size="small">孩子：{{ coudFrom.childText }}</el-tag>
            <el-tag size="small">吸烟：{{ coudFrom.smokingText }}</el-tag>
            <el-tag size="small">喝酒：{{ coudFrom.drinkingText }}</el-tag>
            <el-tag size="small">生肖：{{ coudFrom.zodiacText }}</el-tag>
            <el-tag size="small">星座：{{ coudFrom.constellationText }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <el-table v-loading="listLoading" :data="list">
          <el-table-column align="center" label="匹配会员" width="160">
            <template #default="{ row }">
              <div class="list-item">
                <img class="list-item-avatar" alt="" :src="row.avatar" />
                <div class="list-item-meta">
                  <div class="list-item-meta-name">
                    {{ row.username }}
                  </div>
                  <div class="list-item-meta-age">
                    <div>编号:{{ row.sn }}</div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="相亲状态"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <div v-if="row.state === 0">
                <el-tag type="warning">公开相亲</el-tag>
              </div>
              <div v-else-if="row.state === 1">
                <el-tag type="danger">完全私密</el-tag>
              </div>
              <div v-else-if="row.state === 2">
                <el-tag type="warning">停止相亲</el-tag>
              </div>
              <div v-else><el-tag type="info">已经脱单</el-tag></div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="匹配状态"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <div v-if="row.status === 0">未匹配</div>
              <div v-else>已匹配</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="加入时间"
            prop="created_at"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="操作"
            show-overflow-tooltip
            width="200"
          >
            <template #default="{ row }">
              <el-button
                v-show="isDisabled(row.status)"
                text
                type="primary"
                @click="handleAdd(row)"
              >
                匹配该会员
              </el-button>
            </template>
          </el-table-column>
          <template #empty>
            <el-empty class="vab-data-empty" description="暂无数据" />
          </template>
        </el-table>
        <el-pagination
          background
          :current-page="queryForm.page"
          :layout="layout"
          :page-size="queryForm.pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </template>
    </el-drawer>
  </div>
</template>
<script>
  import { getMatchList } from '@/api/member'
  import { doAdd } from '@/api/match'
  export default defineComponent({
    name: 'AiMatchDrawer',
    emits: ['fetch-data'],
    setup() {
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        size: 'default',
        coudFrom: {},
        title: '',
        mid: '',
        gender: '',
        dialogFormVisible: false,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: { page: 1, pageSize: 10 },
      })
      const showEdit = (row) => {
        state.title = '智能匹配'
        state.coudFrom = row
        state.mid = row.id
        state.gender = row.gender
        state.dialogFormVisible = true
        searchData()
      }
      const searchData = async () => {
        const obj = {
          mid: state.mid,
          gender: state.gender,
          min_age: state.coudFrom.min_age,
          max_age: state.coudFrom.max_age,
          min_height: state.coudFrom.min_height,
          max_height: state.coudFrom.max_height,
          marry: state.coudFrom.marry,
          education: state.coudFrom.education,
          job: state.coudFrom.job,
          salary: state.coudFrom.salary,
          house: state.coudFrom.house,
          car: state.coudFrom.car,
          child: state.coudFrom.child,
          smoking: state.coudFrom.smoking,
          drinking: state.coudFrom.drinking,
          zodiac: state.coudFrom.zodiac,
          constellation: state.coudFrom.constellation,
        }
        const objForm = { ...state.queryForm, ...obj }
        state.listLoading = true
        const {
          data: { list, total },
        } = await getMatchList(objForm)
        state.list = list
        state.total = total
        state.listLoading = false
      }
      const isDisabled = (bind) => {
        if (bind === 0) {
          return true
        } else {
          return false
        }
      }
      const handleAdd = async (val) => {
        try {
          const { msg } = await doAdd({
            otherid: val,
            mid: state.mid,
            maker_id: 0,
          })
          $baseMessage(msg, 'success', 'vab-hey-message-success')
          searchData()
        } catch (error) {
          $baseMessage(msg, 'error', 'vab-hey-message-error')
        }
      }
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        searchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.page = val
        searchData()
      }
      const close = () => {
        state.dialogFormVisible = false
      }
      return {
        ...toRefs(state),
        handleAdd,
        isDisabled,
        handleSizeChange,
        handleCurrentChange,
        showEdit,
        close,
      }
    },
  })
</script>
<style lang="scss">
  .match-container {
    .el-drawer__header {
      height: 50px;
      padding: 0px 20px;
      margin-bottom: 0px;
      color: #000000;
      background-color: rgb(245, 245, 245);
    }

    .el-drawer__footer {
      text-align: center;
    }
  }
</style>
